<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="single_select">
    <div class="single-selected-container">
        <div class="single-selected-show" @click="openSelect($event)" v-html="getValue(choosed)"></div>
        <div class="select-content none">
            <div class="select-option-list-search">
                <input class="" @input="search($event)">
            </div>
            <div class="select-option-list">
                <div class="select-option" v-for="data in list" @click="chooseSelect(data, $event)" v-html="getValue(data)"></div>
            </div>
        </div>
    </div>
</script>
<script>
    // select选择失去焦点消失
    document.body.onclick =
    $("body").on("click", "*", function(event) {
        $(".single-selected-container .select-content").each(function() {
            $(this).parent().find(".select-content").addClass("none");
        });
        $(".single-selected-container>.select-option-list").each(function() {
            $(this).addClass("none");
        });
        if ($(this).hasClass("single-selected-show")) {
            $(this).parent().find(".select-content").removeClass("none");
            $(this).parent().find(".select-option-list").removeClass("none");
            event.stopPropagation();
        }
        if ($(this).hasClass("select-option-list-search")) {
            $(this).parent().parent().find(".select-content").removeClass("none");
            $(this).parent().parent().find(".select-option-list").removeClass("none");
            event.stopPropagation();
        }
    });
    var singleselect = {
        template: "#single_select",
        props: ["list", "choosed", "key", "value", "editable"],
        methods: {
            getValue: function(obj) {
                return this.key ? obj[this.key] : obj;
            },
            search: function(event, key) {
                var target = event.target;
                var value = target.value;
                var list = target.parentNode.parentNode.querySelectorAll(".select-option");
                [].forEach.call(list, function(item) {
                    if (item.innerHTML.indexOf(value) == -1) {
                        item.classList.add("none");
                    } else {
                        item.classList.remove("none");
                    }
                });
                if (this.editable) {
                    this.$dispatch("selectedChange", {
                        type: this.value,
                        selected: value
                    });
                } else {
                    this[key] = value;
                }
            },
            openSelect: function(event) {
                var target = event.target;
                target.parentNode.querySelector(".select-content").classList.toggle("none");
                target.parentNode.querySelector("input").focus();
            },
            chooseSelect: function(value, event) {
                this.openSelect({
                    target: event.target.parentNode.parentNode
                });
                this.$dispatch("selectedChange", {
                    type: this.value,
                    selected: value
                });
            },
        },
        ready: function () {

        }
    }
</script>
<style>
    .single-selected-container {
    	position: relative;
        text-align: left;
    }
    .single-selected-container .none {
		display: none;
	}
    .single-selected-container .select-content {
        position: absolute;
        width: 100%;
        background: #f0f0f0;
        z-index: 1;
    }
    .single-selected-container .single-selected-show {
		display: inline-block;
		width: 100%;
        line-height: 40px;
        height: 40px;
		min-height: 30px;
		padding: 0 8px;
		background-color: #fff;
		border: 1px solid #C8CACD;
		border-radius: 0;
		resize: none;
		box-sizing: border-box;
		vertical-align: middle;
	}
    .single-selected-container .select-option-list-search {
        padding: 0 5px;
        border: 1px solid #ccc;
    }
    .single-selected-container .select-option-list-search input {
        padding: 2px 10px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #4d90fe;
        border-radius: 8px;
        line-height: 26px;
    }
    .single-selected-container .select-span {
        background: #eee;
        margin-right: 14px;
        vertical-align: middle;
    }
    .single-selected-container .select-each {
        display: inline-block;
        line-height: 200%;
    }
    .single-selected-container .select-each:before {
        content: "";
        display: inline-block;
        height: 24px;
        width: 24px;
        background-image: url(../../images/sprite.png);
        background-position: -632px -474px;
        vertical-align: middle;
    }
    .single-selected-container .select-each.noicon:before {
        content: none;
    }
    .single-selected-container .select-option-list {
        position: absolute;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background: #f0f0f0;
        z-index: 1;
        box-sizing: border-box;
    }
    .single-selected-container .select-option {
        padding: 0 8px;
    }
    .single-selected-container .select-option:hover {
        background: #d3d3e0;
    }
    .single-selected-container .select-option-choosed {
        background: #bbbbe6;
    }
</style>
